<template>
  <div class="logs_page">
    <div class="log_box mbm">
      <Begin v-if="userActivatedNo"></Begin>
      <div class="intent mbm">
        <a-row :gutter="16">
          <a-col :span="9" class="mbm">
            <a-card>
              <div slot="extra">
                <a-pagination
                  @change="changePageCall"
                  size="small"
                  v-model="currentCall"
                  :total="countCall"
                  :defaultPageSize = "20"
                />
              </div>
              <div slot="title">
                电话录音
                <a-badge :count="countCall" :numberStyle="{backgroundColor: '#06b400'} " />
              </div>
              <div v-for="(v,k) in listCall" :key="k" class="mbm call info">
                <div class="mbs">{{v.tel_from}} 来电：</div>
                <div v-if="v.text" class="text mbm">{{v.text}}</div>
                <div v-else class="mbm">静默...</div>

                <div v-if="v.recording" class="wav_player mbm">
                  <audio :src="v.recording_url" class="audio" controls></audio>
                </div>
                <div class="time mbs">
                  {{v.dateline_str}}
                  <a @click="delCall(k,v.id)">
                    <a-icon type="delete" />
                  </a>
                </div>
              </div>

              <div v-if="!listCall" class="mbm call info end">··· 没有电话，世界很安静 ···</div>
            </a-card>
          </a-col>
          <a-col :span="9" class="mbm">
            <a-card>
              <div slot="extra">
                <a-pagination
                  @change="changePageSMS"
                  size="small"
                  v-model="currentSMS"
                  :total="countSMS"
                  :defaultPageSize = "20"
                />
              </div>
              <div slot="title">
                我的短信
                <a-badge :count="countSMS" :numberStyle="{backgroundColor: '#06b400'} " />
              </div>
              <div v-for="(v,k) in listSMS" :key="k" class="mbm sms info">
                {{v.tel_from}}
                <p>{{v.text}}</p>
                {{v.dateline_str}}
                <a @click="delSMS(k,v.dateline)">
                  <a-icon type="delete" />
                </a>
              </div>
              <div v-if="!listSMS" class="mbm sms info end">··· 这里没有短信，心里空空的 ···</div>
            </a-card>
          </a-col>
          <a-col :span="6" class="mbm">
            <a-card title="费用预估">
              <p>累计通话时长：{{cost.minute}}分钟</p>
              <p>
                每分钟计费：
                <a type="link" @click="changeInputPrice" v-show="inputPriceHide">
                  {{cost.unit_price}}元
                  <a-icon type="edit" />
                </a>
                <a-input-number
                  :min="0"
                  :step="0.1"
                  v-show="!inputPriceHide"
                  @blur="updatePrice"
                  v-model="cost.unit_price"
                />
              </p>
              <p>预估总费用：{{cost.cost}}元</p>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
import Begin from "./sub/Begin.vue";
export default {
  data() {
    return {
      listSMS: [],
      countSMS: 0,
      listCall: [],
      countCall: 0,
      cost: { minute: 0, cost: 0, unit_price: 0 },
      inputPriceHide: true,
      currentSMS: 1,
      currentCall: 1,
      lastVer:{},
    };
  },
  props: {
    userActivatedNo: Boolean
  },
  components: {
    Begin
  },  
  mounted() {    
    if (typeof this.$store.state.common.token.str != "undefined") {
      this.loadSMS(1);
      this.loadCall(1);
      this.loadCost();
      this.localVersion();
    }
  },
  methods: {
    localVersion() {
      this.$api.setting.getVersion().then(res => {        
        if (res.last != null) {
          const key = `upload`;
          this.lastVer = res.last
          this.$notification.open({
          style:"color: #ff0000;",
          message: `发现新版本`,
          description:'QiarAI已有新版本发布，建议立即更新！',
          placement:'bottomRight',
          btn: h => {
            return h(
              'a-button',
              {
                props: {
                  type: 'primary',
                },
                on: {
                  click: () => {
                    this.$api.setting.goAbout();
                    this.$notification.close(key);
                  },
                },
              },
              '查看更新',
            );
          },
          key,
          onClose: close,
          duration:5,
        });
        }
      });
    },
    loadSMS(page) {
      this.$api.logs.getSMSList({ page: page }).then(res => {
        this.listSMS = res.list;
        this.countSMS = res.count;
      }).catch(()=>{});
    },
    loadCall(page) {
      this.$api.logs.getCallList({ page: page }).then(res => {
        this.listCall = res.list;
        this.countCall = res.count;
      }).catch(()=>{});
    },
    loadCost() {
      this.$api.logs.getCost().then(res => {
        this.cost = res;
      }).catch(()=>{});
    },
    delSMS(k, dateline) {
      let _that = this;
      this.$confirm({
        title: "删除短信",
        content: "您确认要删除这条短信吗?",
        onOk() {
          _that.$api.logs.delSMS({ dateline: dateline }).then(() => {
            _that.listSMS.splice(k, 1);
            _that.countSMS --;
          });
        },
        onCancel() {}
      });
    },
    delCall(k, id) {
      let _that = this;
      this.$confirm({
        title: "删除录音",
        content: "您确认要删除这条通话录音吗?",
        onOk() {
          _that.$api.logs.delCall({ id: id }).then(() => {
            _that.listCall.splice(k, 1);
            _that.countCall--;
          });
        },
        onCancel() {}
      });
    },
    updatePrice() {
      this.$api.setting
        .set({
          key: "unit_price",
          value: this.cost.unit_price
        })
        .then(() => {
          this.loadCost();
          this.inputPriceHide = true;
          this.$message.info("计费单价已修改");
        })
        .catch(() => {
          this.$message.info("计费修改失败！");
        });
    },
    changeInputPrice() {
      this.inputPriceHide = !this.inputPriceHide;
    },
    changePageCall(page) {
      this.loadCall(page);
    },
    changePageSMS(page) {
      this.loadSMS(page);
    }
  }    
};
</script>

<style lang="less" scoped>
.logs_page {
  .sms.info {
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;
  }
  .call.info {
    padding-bottom: 10px;
    border-bottom: 1px dashed #ccc;

    .text {
      color: #06b400;
    }
    .time {
      font-size: 12px;
      color: #999;
    }
    .wav_player {
      overflow: hidden;
      .audio {
        height: 20px;
        //background: #f0f2f5;
        width: 100%;
        margin-left: -10px;
      }
    }
  }
  .info.end {
    text-align: center;
    padding-bottom: 20px;
  }
}
.log_box {
  margin: 20px;
}
</style>